<!--
 * @Description: Description
 * @Author: Kerwin
 * @Date: 2025-03-11 17:44:42
 * @LastEditTime: 2025-04-08 14:30:48
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="recharge-container">
    <view class="title">请选择充值金额</view>
    <view class="btnList">
      <u-button @click="handleMoney(item, index)" v-for="(item, index) in pointsList"
        :custom-style="{ ...customStyle, backgroundColor: selectedButtonIndex === index ? '#ecf5ff' : '', color: selectedButtonIndex === index ? '#2b85e6' : '' }"
        :key="index">
        {{ item.name }}
      </u-button>
    </view>
    <view class="balance">当前余额：0元</view>

    <!-- <view class="title">请选择支付方式</view>
    <view class="payType">请选择支付方式</view> -->
    <view class="title">充值说明</view>
    <view class="tips">
      <p>1.充值后在我的-黑银钱包查看充值及使用记录</p>
      <p>2.充值后不可提现，如需退款需联系客服</p>
      <p>3.充值金额可用于红包、转发金的商业推广使用</p>
    </view>
    <view class="btn"><u-button shape="circle" type="error" @click="creatOrder">确认付款 {{ payMoneys }} 元</u-button></view>


  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, } from '@dcloudio/uni-app';
//api
import { orderApi, productApi, userApi } from '@/api';
import { useUserStore } from '@/store';
import { storeToRefs } from 'pinia';

//#region *************************** 初始数据 *************************/
const userStore = useUserStore()
const { accessToken, useShareCode } = storeToRefs(userStore)
//充值积分选项
const pointsList = ref([])
const orderData = ref()
//付钱
const payMoneys = ref(0)
//按钮样式
const customStyle = ref({
  width: '30%',
  margin: '10rpx',
})
// 选中的按钮索引
const selectedButtonIndex = ref(-1); // 初始化为 -1 表示没有选中任何按钮
//#endregion

const isApp = ref(false)

//#region *************************** 处理初始数据 *************************/
//初始加载
onLoad(async (option) => {
  if (option?.isApp) {
    isApp.value = true
  }
  await getShopProduct()
})

//加载商品列表
async function getShopProduct() {
  const { data } = await productApi.getShopProductList({
    pageIndex: 1,
    pageSize: 10,
    detail: 'true',
    categoryId: 210000,
    shopType: 3,
    shopId: 3448,
    dynamicPrice: false
  })
  console.log(data, '111', data.records[0].shopProductSkus);

  if (data) {
    pointsList.value = data.records[0].shopProductSkus
  }
}

//选中面值
const handleMoney = async (item, index) => {
  console.log(item.money, 555);

  payMoneys.value = item.money
  selectedButtonIndex.value = index; // 更新选中的按钮索引
  orderData.value = {
    // money: item.money,
    // payMoney: 100,
    // status:0,
    // productSkuId: item.productSkuId
    orderProductSkus: [],
    scoreMoney: 0,
    status: 0
  }
  orderData.value.orderProductSkus.push(
    {
      count: 1,
      money: item.money,
      name: item.name,
      shopProductSku: item,
      shopProductSkuId: item.id,
    }
  )
  const { data } = await orderApi.orderMoney(orderData.value)
  const { orderMonies, totalMoney, payMoney, money, moneyUnit } = data
  orderData.value.orderMonies = orderMonies
  orderData.value.totalMoney = totalMoney
  orderData.value.payMoney = payMoney
  orderData.value.money = money
  orderData.value.moneyUnit = moneyUnit

}




// 创建订单
async function creatOrder() {
  const { data } = await orderApi.orderAdd(orderData.value)
  console.log(data, 666);
  if (data) {
    if (isApp.value) {
      const u = browserVersion()
      if (u.iPhone) {
        // @ts-ignore
        window.JSBridge.invoke('goPay', { orderId: data.id, money: data.money })
        return
      } else if (u.isAndroid) {
        // @ts-ignore
        if (window?.Android) {
          // @ts-ignore
          window?.Android?.goPay(data.id, data.money)
        }
        return
      }
    } else {
      location.href = `https://api.mylkjgs.com/?token=${accessToken.value}&orderId=${data.id}`
    }
  }
}
//#endregion


</script>

<style lang="scss" scoped>
.recharge-container {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;

  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  .title {
    margin: 10rpx 0;
    font-weight: 700;
  }

  .btnList {
    display: flex;
    flex-wrap: wrap;
  }

  .balance {
    padding: 40rpx 0;
    border-bottom: 2rpx solid #dcd9d9;
  }

  .tips p {
    margin: 10rpx 0;
  }

  .btn {
    margin: 100rpx 0;
  }

  .payType {
    height: 400rpx;
    background-color: pink;
  }
}
</style>